<template>
  <div class="home">
    <div class="fwxm">
      <div class="fwxm-title">
        <div class="itemtitle-top">
          <div class="line"></div>
          <span class="item-title">联系我们</span>
          <div class="line"></div>
        </div>
        <div class="english">Contact us</div>
      </div>
      <el-amap vid="amapContainer" ref="map" :zoom="zoom" class="amap" :class="widthType==2?'amap2':''"></el-amap>
      <div class="contact-items">
          <kinesis-container class="flex-column item" :duration="200">
            <kinesis-element :strength="6" :originY="0" axis="y" :originX="0"> 
              <i class="el-icon-location-information"></i>
            </kinesis-element>
            <span class="name">公司地址</span>
            <span>{{ getVal('ADDRESS') }}</span>
          </kinesis-container>
          <kinesis-container class="flex-column item item2" :duration="200">
            <kinesis-element :strength="6" :originY="0" axis="y" :originX="0"> 
              <i class="el-icon-phone"></i>
            </kinesis-element>
            <span class="name">联系方式</span>
            <span>{{ getVal('PHONE') }}</span>
          </kinesis-container>
          <kinesis-container class="item item3 flex-column" :duration="200">
            <kinesis-element :strength="6" :originY="0" axis="y" :originX="0"> 
              <i class="el-icon-message"></i>
            </kinesis-element>
            <span class="name">电子邮箱</span>
            <span>{{ getVal('EMAIL') }}</span>
          </kinesis-container>
      </div>
    </div>
  </div>
</template>

<script>
import { lazyAMapApiLoaderInstance } from "vue-amap";
export default {
  components: {
  },
  data() {
    return {
      zoom:10,
      map:null,
      markers:[],
      widthType:1
    };
  },
  computed:{
    params(){
      return this.$store.state.pubParams
    }
  },
  watch:{
    params:{
      handler(val){
        let pos=this.getVal('POSITION')
        let pos2=null
        if(pos==''){
          pos=[116.407831,39.929174]
        }else{
          pos=pos.split(',')
          pos2=pos
        }
        if(pos2&&this.map){
          this.map.setCenter([pos[0], pos[1]])
          this.setMarker([pos2[0],pos2[1]]);
        }
      },
      deep:true
    }
  },
  methods: {
    getVal(name){
      for(let item of this.params){
        if(item.code==name){
          return item.value
        }
      }
      return ''
    },
    initMap() {
      lazyAMapApiLoaderInstance.load().then(() => {
        let pos=this.getVal('POSITION')
        let pos2=null
        if(pos==''){
          pos=[116.407831,39.929174]
        }else{
          pos=pos.split(',')
          pos2=pos
        }
        this.map = new AMap.Map("amapContainer", {
          //center: new AMap.LngLat(pos[0], pos[1]),
          zoom: this.zoom,
        });
        this.map.setCenter([pos[0], pos[1]])
        // 设置标记
        if(pos2){
          this.setMarker([pos2[0],pos2[1]]);
        }
        
        // 监听鼠标点击事件
        this.map.on("click", this.clickMapHandler);
        //调用驾车规划功能
        //this.drivingMap();
      });
    },
    setMarker(lnglat) {
      this.removeMarker();
      console.log("位置", lnglat);
      let marker = new AMap.Marker({
        position: lnglat,
      });
      marker.setMap(this.map);
      this.markers.push(marker);
    },
    // 删除之前后的标记点
    removeMarker() {
      if (this.markers) {
        this.map.remove(this.markers);
      }
    },
    startWatchingWidth() {
        if(this.$refs.map.$el.offsetWidth&&this.$refs.map.$el.offsetWidth<=768){
          this.widthType=2
        }
    },
  },
  mounted() {
    this.initMap()
    this.startWatchingWidth()
  },
};
</script>

<style lang="scss" scoped>
.home {
  display: flex;
  flex-direction: column;
}
.fwxm {
  flex: 1;
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  padding-bottom: 20px;
  .fwxm-title {
    padding: 30px 0;
    .itemtitle-top {
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }
    .line {
      height: 1px;
      background: #000;
      width: 80px;
    }
    .item-title {
      margin: 0 10px;
      font-size: 18px;
      font-weight: bold;
    }
    .english{
        color: $color-main-primary;
      }
  }
  .amap{
    width: $public-width;
    height: 500px;
    max-width: 100%;
  }
  .amap2{
    height: 300px;
  }
}
.contact-items{
  display: flex;
  justify-content: center;
  margin-top: 20px;
  width: 540px;
  max-width: 100%;
  .item{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    height: 160px;
    background: #F2C294;
    margin: 0 10px;
    padding: 6px;
    font-size: 12px;
    user-select:text;
    i{
      color:#CE7929;
      font-size: 36px;
      margin-bottom: 6px;
    }
    .name{
      font-size: 16px;
      margin-bottom: 4px;
    }
    span{
      display: inline-block;
      width: 100%;
      word-wrap: break-word;
    }
  }
  .item2{
    background: #C1F5AA;
    i{
      color:#55C122;
    }
  }
  .item3{
    background: #BAF6F4;
    i{
      color:#3BC4CA;
    }
  }
}
.fwxm-title{
    animation: move-light 15s linear infinite;
  }
  .line{
    animation: scale2 15s linear infinite;
  }
  @keyframes move-light {
    0% { transform: translateX(-300px); opacity: 0.1;}
    1% { transform: translateX(-100px); opacity: 0.3;}
    1.5% { transform: translateX(0);opacity: 0.4; }
    2% { transform: translateX(50px);opacity: 0.6;}
    2.5% { transform: translateX(0); opacity: 1;}
    90% { transform: translateX(0); opacity: 1;}
    96% { transform: rotateZ(0); opacity: 1;}
    100% { transform: rotateZ(360deg); opacity: 0;}
  }
  @keyframes scale2 {
    0% { transform: scaleX(0);opacity: 0.3;}
    10% { transform: scaleX(1);opacity: 1;}
    100% { transform: scaleX(1);opacity: 1;}
  }
</style>
